<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--**表单绑定**
v-model：在表单元素上创建双向数据绑定-->
<div id="app">
    <form autocomplete="off">
        姓名：<input type="text" v-model="username" name="username"><br>
        姓名：{{username}}<br>
        密码：<input type="number" v-model="password" name="password"><br>
        密码：{{password}}
    </form>


</div>


<!--.lazy
这个修饰符让v-model不用实时绑定，而是等到回车的时候才进行绑定-->

<input type="text" v-model.lazy="message">{{message}}

<!--.number
这个修饰符让输入框中的值保持是数字，如果没有加这个修饰符那么即使让它的初始化是数字，输入多个数字时它会自动转为string类型-->

<input type="number" v-model.number="age">{{age}}--{{typeof age}}

<!--.trim
这个修饰符用于去除左右两边的空格-->

<input type="text" v-model.trim="name">


<script>
    let vm = new Vue({
        el:"#app",
        data:{
            username:"张三",
            password: "111"
        }
    })
</script>

</body>
</html>